import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import { ArrowUpOutlined } from '@ant-design/icons';

interface BackToTopProps {
  threshold?: number;
  className?: string;
}

const BackToTop: React.FC<BackToTopProps> = ({ 
  threshold = 300,
  className = ''
}) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > threshold) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener('scroll', toggleVisibility);

    return () => {
      window.removeEventListener('scroll', toggleVisibility);
    };
  }, [threshold]);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  if (!isVisible) {
    return null;
  }

  return (
    <Button
      type="default"
      size="large"
      icon={<ArrowUpOutlined style={{ color: '#000' }} />}
      className={`fixed bottom-4 right-4 sm:bottom-6 sm:right-6 lg:bottom-8 lg:right-8 z-50 shadow-2xl bg-white border border-gray-200 hover:bg-gray-50 transition-all duration-300 hover:scale-105 ${className}`}
      style={{
        width: window.innerWidth < 640 ? '40px' : '48px',
        height: window.innerWidth < 640 ? '40px' : '48px',
        fontSize: window.innerWidth < 640 ? '14px' : '16px',
        color: '#000',
        fontWeight: 500,
        borderRadius: '50%',
        padding: '0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}
      onClick={scrollToTop}
    />
  );
};

export default BackToTop;